import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入重置样式
import '@/styles/base.css'
// 引入公共图标
import '@/styles/iconfont.css'
// 引入 axios
import axios from 'axios'
// 导入 rem 的 js, 动态的设置了, 不同屏幕的html根元素的 font-size
import 'lib-flexible'
// 引入时间 moment
import moment from 'moment'
// 全局引入 input 组件
import HmInput from '@/components/hm-input.vue'
import HmButton from '@/components/hm-button.vue'
import HmNav from '@/components/hm-nav.vue'
// 这是 vant 组件库
import { Button, Icon, Field, Dialog, Uploader, Toast } from 'vant'

Vue.use(Button) // 按钮
Vue.use(Icon) // 图标
Vue.use(Field) // 输入框
Vue.use(Dialog) // 弹出框
Vue.use(Dialog) // 弹出框
Vue.use(Uploader) // 文件上传
Vue.use(Toast) // 轻提示
// 使用全局组件
Vue.component('HmInput', HmInput)
Vue.component('HmButton', HmButton)
Vue.component('HmNav', HmNav)
// axios 的相关优化
// 1. 将axios方法绑定到原型上,vue组件就是可复用的vue实例,可以访问到原型上的方法
// 将来用: this.$axios.get(...)
Vue.prototype.$axios = axios

// 优化基础路径
// 2. 配置好基础路径后,将来axios请求时,会自动帮我们拼接上前缀地址
axios.defaults.baseURL = 'http://localhost:3000'

// 3. 配置拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = token
  }
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器:在响应正在出之前,都会先经过拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么,这里可以写一些对于响应的统一处理
  if (response.data.statusCode === 401 && response.data.message === '用户验证失败') {
    // token过期了,或这是伪造的token
    // 将失效的 token信息 user_id 清除
    localStorage.removeItem('token')
    localStorage.removeItem('user_id')
    // 清除之后,给用户一个提示,提示用户登录失败,重新登录
    Toast('登录状态失效,请重新登录')
    // 拦截状态失效,从新登录
    router.push('/login')
  }
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

// 定义全局过滤器,value 就是需要操作的字符串
// {{ msg | time }} => msg的值,就是这边value
// 这是全局的过滤器,用于格式化时间的
Vue.filter('time', function (value, str = 'YYYY-MM-DD') {
  return moment(value).format(str)
})

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
